<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Network Dashboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <style>
      body {
        padding-top: 60px; 
      }
    </style>

    {% load staticfiles %}
    <script type="text/javascript" src="{% static 'jquery.js' %}"></script>
    <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" media="screen">
    <link href="{% static 'bootstrap/css/bootstrap-responsive.css' %}" rel="stylesheet" media="screen">
    <script type="text/javascript" src="{% static 'd3/d3.v3.js' %}"></script>
    </head>
 <body>
{% block content %}
     <style>
        .chart {
                font-family: Arial, sans-serif;
   	        font-size: 10px;
  	       }

  	.axis path, .axis line {
               fill: none;
               stroke: #000;
   	      }

  	.bar {
               fill: steelblue;
             }
        table {
               width: 40em;
               margin: 2em auto;
             }

        thead {
              background: #000;
              color: #fff;
             }

        td {
              width: 10em;
              padding: 0.3em;
           }

        tbody {
              background: #ccc;
           }

        div.pager {
              text-align: center;
              margin: 1em 0;
           }

        div.pager span {
             display: inline-block;
             width: 1.8em;
             height: 1.8em;
             line-height: 1.8;
             text-align: center;
             cursor: pointer;
             background: #000;
             color: #fff;
             margin-right: 0.5em;
           }

        div.pager span.active {
             background: #c00;
           }

      path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}
 
line {
    stroke: black;
}
    </style>
    <div class="tabbable" id="top-tabs">
       <ul  id ='ul1' class="nav nav-tabs">
          <li class="active"><a id='a1' href="#pane1" data-toggle="tab">Dashboard</a></li>
          <li><a id='a2' href="#pane2" data-toggle="tab">Time-Based</a></li>
          <li><a id='a3' href="#pane3" data-toggle="tab">Protocol-Based</a></li>
          <li><a id='a4' href="#pane4" data-toggle="tab">Alert</a></li>
          <li><a id='a5' href="#pane5" data-toggle="tab">Search</a></li>
        </ul>
       <div class="tab-content">
         <div id="pane1" class="tab-pane active">
            <div id="low-tabs2" class="tabbable">
               <ul id="childTabLinks_2" class="nav nav-tabs">
                  <li class="active"><a id='c3' href="#childtabs-13" data-toggle="tab">IN Traffic</a></li>
                  <li><a id='c4' href="#childtabs-14" data-toggle="tab">OUT Traffic</a></li>
               </ul>
               <div class="tab-content">
                <div id="childtabs-13" class="tab-pane active">
                  <div id='intraffic'>
                             <select id="my_options">
				   <option value="1">last 15 minutes</option>
				   <option value="2">last hour</option>
				   <option value="3">last day</option>
				   <option value="4">last month</option>
			     </select>
			     <input type="submit" value="search" onClick="decide_time()">
                 <div id='top_ip'>  
                      
               </div>
               <div id='initial'>
                     <table id='t1'>
                      <thead>
          		    <tr>
              			
                                <th>dstip</th>

                           </tr>
                      </thead>
                      <tbody>
         		   {% for item in slist1 %}
                           <tr>
             			
             	                <td>{{ item.dstip}}</td>
             	                
           		   </tr>
                           {% endfor %}

          	      </tbody>

                      </table>
                 </div>
               </div>
                </div> <!--child-tab-13-->
                <div id="childtabs-14" class="tab-pane">
                   <div id='outtraffic'>
                   <select id="my_options1">
				   <option value="1">last 15 minutes</option>
				   <option value="2">last hour</option>
				   <option value="3">last day</option>
				   <option value="4">last month</option>
			     </select>
			     <input type="submit" value="search" onClick="decide_time1()">
                 <div id='top_ip2'>   
               </div>
               <div id='initial2'>
                   <table id='t2'>
                      <thead>
          		    <tr>
              			<th>srcip</th>
                                

                           </tr>
                      </thead>
                      <tbody>
         		   {% for item in slist2 %}
                           <tr>
             			<td>{{ item.srcip}}</td>
             	                
             	                
           		   </tr>
                           {% endfor %}

          	      </tbody>

                      </table>
			</div>
			</div>
                </div> <!--child-tab-14-->
             </div> <!--tab contents-->
            </div> <!--tabbable-->
         </div><!--pane 1end -->
         <div id="pane2" class="tab-pane">
              <div id='timedisp'>
            <div id="low-tabs1" class="tabbable">
               <ul id="childTabLinks_1" class="nav nav-tabs">
                  <li class="active"><a id='c1' href="#childtabs-11" data-toggle="tab">packets-time based</a></li>
                  <li><a id='c2' href="#childtabs-12" data-toggle="tab">bytes-time based</a></li>
               </ul>
               <div class="tab-content">
                      
               <div id="childtabs-11" class="tab-pane active">
                  <div id='timedisp1'>
                  <select id="ddlViewBy">
				   <option value="1">last 15 minutes</option>
				   <option value="2">last hour</option>
				   <option value="3">last day</option>
				   <option value="4">last month</option>
                    </select>
                    <input type="submit" value="search" onClick="decide_time3()">
                   
                   <div id='chart3'></div>
                   <div id='table3'></div>
                  <button type="button" id='but1'>Details</button>
                  </div>
                </div> <!--childtabs-11-->
                <div id="childtabs-12" class="tab-pane">
			<div id='timedisp2'>
                   <select id="ddlViewBy1">
				   <option value="1">last 15 minutes</option>
				   <option value="2">last hour</option>
				   <option value="3">last day</option>
				   <option value="4">last month</option>
                    </select>
                    <input type="submit" value="search" onClick="decide_time4()">
                   <div id='chart4'></div>
                   <div id='table4'></div>
                  <button type="button" id='but2'>Details</button>
                     </div>
                </div>  <!--child-tab-12-->
                </div> 
            </div>
            </div> <!--tabbable-->
         </div><!--pane 2end -->
         <div id="pane3" class="tab-pane">
            <div id="protdisp">
                    <select id="ddlViewBy2">
				   <option value="1">last 15 minutes</option>
				   <option value="2">last hour</option>
				   <option value="3">last day</option>
				   <option value="4">last month</option>
                    </select>
                    <input type="submit" value="search" onClick="decide_prot()">
                   <div id='chart5'></div>
                   <div id='table5'></div>
                   <button type="button" id='but3'>Details</button>
                   
                   
           </div>
         
         </div><!--pane 3end -->
         <div id="pane4" class="tab-pane">
            <div id='ack1'>
              <div id='atck'>
              </div>
            </div>
         </div>
         <div id="pane5" class="tab-pane">
            <div id="srch">
              ip: <input type="text" id="sip">
              start_date(YYYY-MM-DD hh:mm:ss): <input type="text" id="sdate">
              end_date(YYYY-MM-DD hh:mm:ss): <input type="text" id="edate">
              <input type="submit" value="search" onClick="drawgraph_per_date()">
            </div>
         </div>
     </div><!-- /.tab-content -->

    </div><!-- /.tabbable -->
 {% endblock %}
<script>
$( document ).ready(function() {
$('#intraffic').show();
$('#outtraffic').show();
$('#timedisp').show();
$('#protdisp').show();
$('#srch').show();
$('#atck').show();
  $("#a2").click(function() { 
     $.post("/time_based_plot/", {'srcip':'1'}, function(data){ 
            $('#low-tabs1').append(data); 
         });
 });
  $("#a3").click(function() { 
     $.get("/protocol_based_plot/", {'dstip':'1'}, function(data){ 
            $('#low-tabs2').append(data); 
         });
 });
  $("#a4").click(function() { 
     $.get("/attack_detection/", {'s1':'1'}, function(data){ 
            $('#ack1').empty();
            $('#ack1').append(data); 
         });
 });
}); 
function decide_time()
{
   var e = document.getElementById("my_options");
   var selval = e.options[e.selectedIndex].value;
   $.get("/top_in_traffic/", {'srci':selval}, function(data){ 
        $('#top_ip').empty();
        $('#top_ip').append(data); 
        
      });
}
function decide_time1()
{
   var e = document.getElementById("my_options1");
   var selval = e.options[e.selectedIndex].value;
   $.get("/top_out_traffic/", {'srci':selval}, function(data){ 
        $('#top_ip2').empty();
        $('#top_ip2').append(data); 
        
      });
}
function decide_time3()
{
   var e = document.getElementById("ddlViewBy");
   var selval = e.options[e.selectedIndex].value;
   $.post("/time_based_plot/", {'srcip':selval}, function(data){ 
    
         $('#low-tabs1').append(data); 
       
      });
}
function decide_time4()
{
   var e = document.getElementById("ddlViewBy1");
   var selval = e.options[e.selectedIndex].value;
   $.post("/time_based_plot/", {'srcip':selval}, function(data){ 
     
         $('#low-tabs1').append(data); 
     
      });
}
function decide_prot()
{
   var e = document.getElementById("ddlViewBy2");
   var selval = e.options[e.selectedIndex].value;
   $.post("/protocol_based_plot/", {'dstip':selval}, function(data){ 
    
         $('#low-tabs2').append(data); 
    
      });
}
function drawgraph_per_ip()
{
  
  var src_ip = document.getElementById("sip").value;
 
  $.post("/drawgraph_per_ip/", {'sip':src_ip}, function(data){ 
      
            
       $('#srch').append(data); 
     
      });
}
function drawgraph_per_date()
{
  var src_ip = document.getElementById("sip").value;
  var sdate = document.getElementById("sdate").value;
  var edate = document.getElementById("edate").value;
  $.post("/drawgraph_per_date/", {'sdate':sdate,'edate':edate,'sip':src_ip}, function(data){ 
     
                   $('#srch').append(data); 
      
      });
}
</script>
    <script src="{% static 'bootstrap/js/bootstrap.js'%}"></script>
 </body>

</html> 
